<!DOCTYPE html>
<html class="reftest-wait">
<meta name="assert" content="This should resume the animation after unhiding the iframe.">
<meta name="fuzzy" content="0-25;0-50">
<title>CSS Test (Animations): Unhiding iframe visibility should restart animation. </title>
<link rel="help" href="https://bugs.chromium.org/p/chromium/issues/detail?id=616270">
<link rel="match" href="toggle-animated-iframe-visibility-ref.html">
<script src="/common/reftest-wait.js"></script>

<div id="container"></div>

<div id="log"></div>

<script>
  var container;
  var block;
  var logDiv;

  function verifyVisibility(expected_visibility, message) {
    if (getComputedStyle(block).visibility !== expected_visibility)
      logDiv.innerHTML = `FAIL: ${message}`;
  }

  async function runTest() {
    var animation = block.animate(
    { transform: [ 'rotate(0deg)', 'rotate(180deg)' ] },
    {
      duration: 10000000,
      delay: -5000000,
      easing: 'cubic-bezier(0, 1, 1, 0)'
    });

    await animation.ready;

    container.style.visibility = 'hidden';
    requestAnimationFrame(() => {
      verifyVisibility('hidden', 'style.visibility should be hidden');
      container.style.visibility = 'visible';

      requestAnimationFrame(() => {
        verifyVisibility('visible', 'style.visiblity should be visible');
        takeScreenshot();
      });
    });
  }

  window.onload = function () {
    logDiv = document.getElementById('log');
    container = document.getElementById('container');
    block = document.createElement('iframe');

    container.appendChild(block);
    block.onload = runTest;
    block.src = 'resources/block.html';
  };
</script>
